<template>
  <div class="common-page-container">
    <a-card :bordered="false" class="common-content-card">
      <!-- 搜索区域 -->
      <SearchForm 
        :query-params="queryParams" 
        @search="handleSearch"
        @reset="handleReset"
        class="common-search-form"
      />
      
      <!-- 操作按钮区域 -->
      <TableOperations 
        :is-expand-all="isExpandAll"
        @add="handleAdd"
        @expand-toggle="handleExpandAll"
        @refresh="fetchDeptList"
        class="common-table-operations"
      />

      <!-- 表格区域 -->
      <DeptTable
        v-if="!loadError && deptList && deptList.length > 0"
        :columns="columns"
        :data="deptList"
        :loading="loading"
        :expanded-keys="expandedKeys"
        @edit="handleEdit"
        @delete="handleDelete"
        @add-sub="handleAddSub"
        @expanded-rows-change="onExpandedRowsChange"
        @status-change="(record, status) => handleStatusChange(record, status === 1)"
      />
      
      <!-- 加载出错或无数据时显示重试按钮 -->
      <Empty
        :loading="loading"
        :load-error="loadError"
        :error-message="errorMessage"
        :data-list="deptList"
        empty-text-key="dept.emptyData"
        @retry="fetchDeptList"
      />
    </a-card>

    <!-- 部门表单弹窗 -->
    <DeptFormModal
      :open="modalVisible"
      @update:open="modalVisible = $event"
      :form="form as any"
      :form-mode="formMode"
      :dept-tree="deptTreeData"
      :loading="submitLoading"
      @submit="handleSubmit"
      class="common-modal-form"
    />
  </div>
</template>

<script lang="ts" setup>
import { useTableColumns } from './config/tableColumns'
import useDeptManagement from './hooks/useDeptManagement'
import SearchForm from './components/SearchForm.vue'
import TableOperations from './components/TableOperations.vue'
import DeptTable from './components/DeptTable.vue'
import DeptFormModal from './components/DeptFormModal.vue'

// 组件名称
defineOptions({
  name: 'DeptManagement'
})

// 使用部门管理钩子函数
const {
  // 状态
  loading,
  submitLoading,
  deptList,
  deptTreeData,
  expandedKeys,
  isExpandAll,
  modalVisible,
  queryParams,
  form,
  formMode,
  loadError,
  errorMessage,
  
  // 方法
  onExpandedRowsChange,
  handleSearch,
  handleReset,
  handleExpandAll,
  fetchDeptList,
  handleStatusChange,
  handleAdd,
  handleAddSub,
  handleEdit,
  handleDelete,
  handleSubmit
} = useDeptManagement()

// 表格列配置
const columns = useTableColumns()
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 